<template>
  <div v-loading="loading">
    <div class="el-header">
      <h3 style="font-size: 20px">充值中心</h3>
      <p>1.点券是游戏中购买商城物品和进行抽奖的虚拟货币。</p>
      <p>2.点券与人民币换算为1：1000，即1元=1000点券，你可以选择支付宝或者是微信的付款方式来进行充值。</p>
      <p>3.点券最低5元起充。</p>
    </div>
    <div style="border: 1px solid gainsboro;width: 798px;margin: auto">
    <div class="el-main">
          <span>充值帐号：
            <span>{{username}}</span>
            <el-button icon="el-icon-refresh-left" @click="getUserCera" circle></el-button>
            <span style="float: right;">当前余额：<span>{{number}}点券</span></span>
					</span>
    </div>
    <div class="el-main2">
      <div class="margin">
        <el-radio-group v-model="num" size="medium">
          <el-radio :label="30" border>30</el-radio>
          <el-radio :label="50" border>50</el-radio>
          <el-radio :label="100" border>100</el-radio>
          <el-radio :label="999" border>其他金额</el-radio>
        </el-radio-group>
      </div>

      <div class="margin">
        <span class="padding">充值方式</span>
        <el-radio-group v-model="czMode" size="medium">
          <el-radio :label="0" border>微信</el-radio>
          <el-radio :label="1" border>支付宝</el-radio>
        </el-radio-group>
      </div>

<!--      收款码展示-->
      <div class="demo-image__placeholder" v-show="skm">
        <div class="margin">
          <el-image :src="src" style="width: 100px"></el-image>
        </div>
      </div>


    </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: window.sessionStorage.getItem("token"),
      //点券余额
      number: '0',
      //默认充值金额
      num: "",
      loading: false,
      //收款码
      src: '@/assets/30.jpg',
      srcList: [
        '@/assets/30.jpg',
        '@/assets/30.jpg'
      ],
      //是否展示收款码
      skm: false,
      //充值方式（微信、支付宝）
      czMode: ''
    };
  },
  created() {
    let token = window.sessionStorage.getItem("token")
    if (!token){
      this.$message.error("会话已超时,请重新登录")
      this.$router.push("/login")
    }
    this.getUserCera()
  },
  //侦听充值金额
  watch:{

    //绑定收款码
    czMode(){
      if (this.czMode == "1") {
        if (this.num == 30) {
          this.src = require('../assets/30.jpg')
          this.skm = true
        }else if (this.num == 50) {
          this.src = require('../assets/30.jpg')
          this.skm = true
        }else if (this.num == 100) {
          this.src = require('../assets/30.jpg')
          this.skm = true
        }else if (this.num == '999') {
          this.src = require('../assets/30.jpg')
          this.skm = true
        }
      }else if (this.czMode == "0"){
        if (this.num == 30) {
          this.src = require('../assets/weixin.jpg')
          this.skm = true
        }else if (this.num == 50) {
          this.src = require('../assets/weixin.jpg')
          this.skm = true
        }else if (this.num == 100) {
          this.src = require('../assets/weixin.jpg')
          this.skm = true
        }else if (this.num == '999') {
          this.src = require('../assets/weixin.jpg')
          this.skm = true
        }
      }
    },
  },
  methods:{
    getUserCera() {
      //如果校验成功,则发起ajax请求
      this.$http.post("/user/getUserCera?accountname=" + this.username).then(result => {
        if (result.status == 200) {
          this.number = result.data.data
          this.$message.success("余额查询成功")
        }
      })
    },



  }

}
</script>

<style>
    .el-header {
      background-color: #27b0d6;
      color: #fcfcfc;
      padding-top: 5px;
      padding-bottom: 5px;
      line-height: 20px;
      font-size: 10px;
      width: 800px;
      margin: auto;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
    }


    .el-main {
      background-color: rgba(39, 176, 214, .15);
      color: #333;
      width: 780px;
      margin: 10px;
    }

    .margin{
      margin-top: 30px;
    }

    .padding{
      padding-right: 20px;
    }

    .fontFamily{
      line-height:1.7;
      color: #ea1328;
      font-size: 30px;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .el-main2{
      margin: 20px;
    }
</style>
